import { useState, useContext } from 'react';
import { Context } from './reducer';

function Counter(props) {
  const [count, setCount] = useState(0);
  const { store, dispatch } = useContext(Context); //拿到传入的store, dispatch

  const add = () => {
    dispatch({ type: 'add' });
    setCount(count + 1);
  };
  return (
    <div>
      <h3>
        面馆{props.shop}：{count}碗面
      </h3>
      <h4>{`总共发行${store.total}碗面`}</h4>
      <button onClick={add} style={{ height: '40px' }}>
        加一碗
      </button>
    </div>
  );
}
export default Counter;
